<template>
    <div class="member-card">
      <div class="header">
        <div class="title">会员卡信息</div>
        <el-button class="back-btn" icon="el-icon-arrow-left" />
      </div>
      <div class="content">
        <div class="left">
          <div class="item">
            <div class="label">会员：</div>
            <div class="value">阿豪</div>
          </div>
          <div class="item">
            <div class="label">会员卡类型：</div>
            <div class="value">次卡类型</div>
          </div>
          <div class="item">
            <div class="label">当前状态：</div>
            <div class="value">正常</div>
          </div>
          <div class="item">
            <div class="label">剩余次数：</div>
            <div class="value">3次</div>
          </div>
          <div class="item">
            <div class="label">开卡场馆：</div>
            <div class="value">健身馆</div>
          </div>
        </div>
        <div class="right">
          <div class="item">
            <div class="label">会员卡名称：</div>
            <div class="value">教练私教课程</div>
          </div>
          <div class="item">
            <div class="label">会员卡创建时间：</div>
            <div class="value">2020-03-18</div>
          </div>
          <div class="item">
            <div class="label">有效期：</div>
            <div class="value">无限制</div>
          </div>
          <div class="item">
            <div class="label">累计金额：</div>
            <div class="value">750元</div>
          </div>
          <div class="item">
            <div class="label">备注：</div>
            <div class="value">123123</div>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="table-title">消费记录</div>
        <el-table :data="tableData" border>
          <el-table-column prop="time" label="发生时间" />
          <el-table-column prop="change" label="变化" />
          <el-table-column prop="amount" label="金额" />
          <el-table-column prop="description" label="消费说明" />
          <el-table-column prop="status" label="状态" />
        </el-table>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  
  export default defineComponent({
    name: 'vipCardManagement',
    data() {
      return {
        tableData: [
          {
            time: '2021-09-01 12:00:00',
            change: '消费',
            amount: '50元',
            description: '购买私教课程',
            status: '已完成',
          },
          {
            time: '2021-09-02 14:00:00',
            change: '充值',
            amount: '100元',
            description: '',
            status: '已完成',
          },
          {
            time: '2021-09-03 16:00:00',
            change: '消费',
            amount: '150元',
            description: '购买健身器材',
            status: '已取消',
          },
        ],
      };
    },
  });
  </script>
  
  <style scoped>
  .member-card {
    width: 100%;
    margin: 0 auto;
    font-size: 14px;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  
  .back-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .left {
    width: 50%;
  }
  
  .right {
    width: 50%;
  }
  
  .item {
    display: flex;
    margin-bottom: 10px;
  }
  
  .label {
    width: 120px;
    color: #999;
  }
  
  .value {
    flex: 1;
  }
  
  .table {
    margin-top: 20px;
  }
  
  .table-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  </style>
  